{{define "title"}}Auth Service - Services{{end}}

{{define "content"}}

<script type="text/javascript" src="/ui/static/js/services.js"></script>

<template id="replica-service-row-template">
  <tr>
    <th class="text-start" scope="row">
      <a id="service-id" target="_blank" rel="noreferrer"></a>
    </th>
    <td class="text-center">
      <span id="push-status" class="badge rounded-pill"></span>
    </td>
    <td id="auth-code-version" class="text-center"></td>
    <td id="lag" class="text-end font-monospace"></td>
  </tr>
</template>

<template id="services-table-template">
  <table class="table table-hover align-middle my-0">
    <caption class="text-end">
      Last updated: <span id="last-updated"></span>
    </caption>
    <thead>
      <tr>
        <th scope="col" class="text-start">Service</th>
        <th scope="col" class="text-center">Push status</th>
        <th scope="col" class="text-center">Auth API</th>
        <th scope="col" class="text-end">Push attempt duration (ms)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="text-start" scope="row">
          <span id="primary-service-id"></span>
          <span class="text-muted fw-normal">(primary service)</span>
        </th>
        <td class="text-center">
          <span class="badge rounded-pill bg-ligh text-secondary">
            N/A
          </span>
        </td>
        <td id="primary-auth-code-version" class="text-center"></td>
        <td class="text-end">
          <small class="text-muted">N/A</small>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<div class="container px-0">
  <!-- Placeholder for loading box to be displayed while the page is loading for
    the first time. -->
  <div id="loading-box-placeholder"></div>

  <!-- The main page contents. -->
  <div id="services-content" style="display: none;">
    <h3 class="text-center">
      Services
    </h3>
    <div class="text-muted text-center">
      Services that receive the AuthDB via the legacy direct push method.
    </div>

    <div id="services-table-container"></div>

    <!-- Placeholder for services error. -->
    <div id="api-error-placeholder" class="my-4"></div>

    <div class="d-flex justify-content-end">
      <button id="refresh-btn" type="button" class="btn btn-primary">
        <i class="bi bi-arrow-clockwise me-2"></i>
        <span>Refresh</span>
      </button>
    </div>
  </div>
</div>

{{end}}